<template>
  <div>
  <div class="reItem" v-for="item of relist" :key="item.id">
    <img class="reviewImg" :src="item.wx_img" />
    <div class="rightInfo">
      <div class="reviewTit">
        <span class="retitle">{{item.wxname}}</span>
        <div class="zan" @click="addreview(item.id)">
          <i class="cuIcon-appreciate icon"></i>
          <p>{{item.dz}}</p>
        </div>
      </div>
      <p class="reViewTime">{{item.addtime}}</p>
      <p>{{item.content}}</p>
    </div>
  </div>
  </div>
</template>

<script>
import { reviewZan } from '@/api/news'
export default {
  name: 'reviewList',
  props: {
    relist: Array,
    wid: Number
  },
  methods: {
    addreview (e) {
      console.log(e)
      reviewZan(this.wid, e).then(res => {
        console.log(res)
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
  .reItem .reviewImg{
    width: .8rem;
    height: .8rem;
    border-radius: 50%;
    border:1px solid #efefef;
    margin-right: .3rem;
    background: #efefef;
  }
  .reItem{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    background: #fff;
    padding: .3rem;
    border-bottom: 1px solid #F5F5F5;
  }
    .rightInfo{
      flex 1
    }
  .reviewTit{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .reViewTime{
    color: #999;
    font-size: .24rem;
    margin .2rem 0
  }
  .retitle{
    color: #777;
    font-size: .28rem;
  }
  .reItem rich-text{
    font-size: .28rem;
    display: block;
    margin-top: .16rem;
  }
  .reItem>view{
    width: 83%;
  }
  .reviewTit .icon{
    font-size: .3rem;
    color: #777;
    display: block
  }
  .zan{
    display flex
    flex-direction row
    justify-content flex-end
    align-items center
  }
  .zan i{
    margin-right .1rem
  }
</style>
